<template>
  <div>
    <a-modal
      :title="isEdit ? '编辑' : '新增'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="800"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="loading">
        <a-form-model
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          layout="horizontal"
          labelAlign="right"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
        >
          <a-form-model-item label="菜单名称" prop="name">
            <a-input v-model="formData.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="菜单父级编号" prop="parent_menu_number">
            <a-input v-model="formData.parent_menu_number" placeholder="请输入" :disabled="parentDisabled" />
          </a-form-model-item>
          <a-form-model-item label="菜单编号" prop="menu_number">
            <a-input v-model="formData.menu_number" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="菜单代码" prop="menu_code">
            <a-input v-model="formData.menu_code" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="组件名" prop="component">
            <a-input v-model="formData.component" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="菜单URL" prop="url_path">
            <a-input v-model="formData.url_path" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="重定向地址" prop="redirect">
            <a-input v-model="formData.redirect" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="图标">
            <a-input v-model="formData.icon" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="target">
            <a-input v-model="formData.target" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="是否隐藏" prop="hidden">
            <a-switch v-model="formData.hidden" checked-children="是" un-checked-children="否" default-checked />
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>
    <script>
import { editMenuApi, getMenuDetailApi } from '@/api/manager'
export default {
  data() {
    return {
      isEdit: false,
      visible: false,
      confirmLoading: false,
      pkey: null,
      formData: {
        menu_number: '', // 菜单编号
        name: '', // 菜单名称
        menu_code: '', // 菜单代码
        component: '', // 组件名
        hidden: false, // 是否隐藏
        parent_menu_number: 0, // 父级菜单编号
        url_path: '', // 菜单url
        redirect: '', // 重定向url
        icon: '', // 图标
        target: '',
      },
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'change' }],
        menu_number: [{ required: true, message: '请输入菜单编号', trigger: 'change' }],
        parent_menu_number: [{ required: true, message: '请输入父级菜单编号', trigger: 'change' }],
        menu_code: [{ required: true, message: '请输入菜单名代码', trigger: 'change' }],
        component: [{ required: true, message: '请输入组件名', trigger: 'change' }],
        hidden: [{ required: true, message: '请选择是否隐藏', trigger: 'change' }],
        // url_path: [{ required: true, message: '请输入菜单URL', trigger: 'change' }],
      },
      loading: false,
      parentDisabled: false
    }
  },
  methods: {
    add(row = null) {
      this.isEdit = false
      this.visible = true
      this.pkey = null
      this.resetForm()
      if(row) {
        this.parentDisabled = true
        this.formData.parent_menu_number = row.menu_number
      }
    },
    edit(row) {
      this.isEdit = true
      this.visible = true
      this.pkey = row.pkey
      this.resetForm()
      this.getMenuDetail()
    },
    resetForm() {
      this.parentDisabled = false
      this.formData.menu_number = ''
      this.formData.name = ''
      this.formData.menu_code = ''
      this.formData.component = ''
      this.formData.hidden = false
      this.formData.parent_menu_number = 0
      this.formData.url_path = ''
      this.formData.redirect = ''
      this.formData.icon = ''
      this.formData.target = ''
    },
    handleOk() {
        console.log(this.isEdit)
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          let formObj = { ...this.formData }
          formObj.menu_number = Number(formObj.menu_number)
          if (this.isEdit) {
            formObj.pkey = this.pkey
          }
          const { statusCode, errors } = await editMenuApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.resetForm()
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取菜单详情
    async getMenuDetail() {
      this.loading = true
      const { data } = await getMenuDetailApi({
        pkey: this.pkey,
      })
      this.loading = false
      this.formData = {...data}
      delete this.formData.pkey
    },
  },
}
</script>
        
  <style lang="less" scoped>
.three {
  max-height: 400px;
  overflow-y: auto;
}
</style>